<template>
  <div class="main self_adaption" v-loading="loading" element-loading-text="上传中">
    <div class="mains">
      <div class="other">
        <p class="main_text">商城首页</p>
      </div>
      <div class="els first">
        <div class="mesbox els">
          <div class="mes_title els">
            <div class="left">
              <p class="mes_text">月销售总额</p>
              <p class="mes_num">
                {{ shopMes.salesInfo.currentMonthCount }}
              </p>
            </div>
            <img src="@/assets/images/销售总额.png" class="mes_photo" />
          </div>
          <div class="mesbottom">
            环比上月&nbsp;<span style="color: red">
              <div v-if="String(shopMes.salesInfo.growthRate).substring(0, 1) != '-'">
                <el-icon><Top /></el-icon>{{ shopMes.salesInfo.growthRate }} %
              </div>
              <div v-else>
                <el-icon><Bottom /></el-icon>{{ String(shopMes.salesInfo.growthRate).substring(1) }}%
              </div>
            </span>
          </div>
        </div>
        <div class="mesbox els">
          <div class="mes_title els">
            <div class="left">
              <p class="mes_text">本月订单数量</p>
              <p class="mes_num">
                {{ shopMes.orderCountInfo.currentOrderCount }}
              </p>
            </div>
            <img src="@/assets/images/订单数量.png" alt="" class="mes_photo" />
          </div>
          <div class="mesbottom">
            环比上月&nbsp;<span style="color: red">
              <div v-if="String(shopMes.orderCountInfo.growthRate).substring(0, 1) != '-'">
                <el-icon><Top /></el-icon>{{ shopMes.orderCountInfo.growthRate }} %
              </div>
              <div v-else>
                <el-icon><Bottom /></el-icon>{{ String(shopMes.orderCountInfo.growthRate).substring(1) }}%
              </div>
            </span>
          </div>
        </div>
        <div class="mesbox els">
          <div class="mes_title els">
            <div class="left">
              <p class="mes_text">本月浏览量</p>
              <p class="mes_num">
                {{ shopMes.viewCountInfo.current_month_views }}
              </p>
            </div>
            <img src="@/assets/images/浏览量.png" alt="" class="mes_photo" />
          </div>
          <div class="mesbottom">
            环比上月&nbsp;<span style="color: red">
              <div v-if="String(shopMes.viewCountInfo.change_rate).substring(0, 1) != '-'">
                <el-icon><Top /></el-icon>{{ shopMes.viewCountInfo.change_rate }} %
              </div>
              <div v-else>
                <el-icon><Bottom /></el-icon>{{ String(shopMes.viewCountInfo.change_rate).substring(1) }}%
              </div>
            </span>
          </div>
        </div>
        <div class="mesbox els">
          <div class="mes_title els">
            <div class="left">
              <p class="mes_text">当月新增关注用户</p>
              <p class="mes_num">
                {{ shopMes.followCountInfo.currentFollowCount }}
              </p>
            </div>
            <img src="@/assets/images/用户管理.png" alt="" class="mes_photo" />
          </div>
          <div class="mesbottom">
            环比上月&nbsp;<span style="color: red">
              <div v-if="String(shopMes.followCountInfo.growthRate).substring(0, 1) != '-'">
                <el-icon><Top /></el-icon>{{ shopMes.followCountInfo.growthRate }} %
              </div>
              <div v-else>
                <el-icon><Bottom /></el-icon>{{ String(shopMes.followCountInfo.growthRate).substring(1) }}%
              </div>
            </span>
          </div>
        </div>
      </div>
      <div class="els secound">
        <!-- /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*  Echarts  /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*  -->
        <div class="linechart">
          <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="销售额" name="销售额">
                    <div style="width: 100%; height: 100%" id="main"></div>
                </el-tab-pane>
                <el-tab-pane label="浏览量" name="浏览量">
                    <div style="width: 100%; height: 100%" id="main1"></div>
                </el-tab-pane>
                <el-tab-pane label="关注用户" name="关注用户">
                    <div style="width: 100%; height: 100%" id="main2">15</div>
                </el-tab-pane>
            </el-tabs> -->
          <ul class="nav_ul" style="padding: 0">
            <li v-for="(item, index) in nav_list" :key="index" :class="item.class" @click="navChange(item)">
              <span class="nav_lis">
                {{ item.text }}
              </span>
            </li>
          </ul>
          <salesInfo
            class="echarts"
            v-show="show == '销售额' && timeChange == '年'"
            @widthWight="widthWight"></salesInfo>
          <salesInfo1
            class="echarts"
            v-show="show == '销售额' && timeChange == '周'"
            :echartsHeight="echartsHeight"
            :echartsWidth="echartsWidth"></salesInfo1>
          <monthlyViewCount
            class="echarts"
            v-show="show == '浏览量' && timeChange == '年'"
            :echartsHeight="echartsHeight"
            :echartsWidth="echartsWidth"></monthlyViewCount>
          <monthlyViewCount1
            class="echarts"
            v-show="show == '浏览量' && timeChange == '周'"
            :echartsHeight="echartsHeight"
            :echartsWidth="echartsWidth"></monthlyViewCount1>
          <attention
            class="echarts"
            v-show="show == '关注用户' && timeChange == '年'"
            :echartsHeight="echartsHeight"
            :echartsWidth="echartsWidth"></attention>
          <attention1
            class="echarts"
            v-show="show == '关注用户' && timeChange == '周'"
            :echartsHeight="echartsHeight"
            :echartsWidth="echartsWidth"></attention1>
          <el-radio-group
            size="small"
            v-model="timeChange"
            style="position: absolute; right: 10px; top: 10px"
            @change="timeChangeEve">
            <el-radio-button label="年" />
            <el-radio-button label="周" />
          </el-radio-group>
        </div>
        <div class="shop_mes">
          <div class="els shop_title">
            <img :src="shopMes.shop ? shopMes.shop.shopHeadImg : ''" alt="" class="head_img" />
            <div class="center">
              <p>{{ shopMes.shop.shopName }}</p>

              <span v-if="shopMes.shop.rank == 0" class="shop_rate">青铜</span>
              <span v-else-if="shopMes.shop.rank == 1" class="shop_rate">白银</span>
              <span v-else-if="shopMes.shop.rank == 2" class="shop_rate">黄金</span>
              <span v-else class="shop_rate">钻石</span>
            </div>
            <button class="none" style="color: #409eff; font-size: 12px; cursor: pointer" @click="shopAmend">
              修改
            </button>
          </div>
          <!-- 简介 -->
          <div class="brief">
            <p class="text" v-if="shopMes.shop.briefIntroduction == null">暂无简介</p>
            <p class="text" v-else>
              {{ shopMes.shop.briefIntroduction }}
            </p>
          </div>
          <div class="els nav_box">
            <div class="els navlist">
              <div>商铺保证金</div>
              <div v-if="shopMes.shop.depositIsPayed == 1" class="first_text">已缴纳</div>
              <div v-else class="first_text">无需缴纳</div>
            </div>
            <div class="els navlist">
              <div>信用分</div>
              <div style="font-weight: bold; color: #333">100<span style="color: #3d3d3d">分</span></div>
            </div>
            <div class="els navlist">
              <div>状态</div>
              <div style="display: flex; align-items: center; color: #1ac78a">
                <span style="font-size: 40px; color: #1ac78a">·</span>正常
              </div>
            </div>
            <div class="els navlist">
              <div>支付入口</div>
              <div style="display: flex; align-items: center">
                未开通<span style="color: #116cf8; cursor: pointer" @click="authorize">(点击开通)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="els third">
        <div class="left">
          <div class="order">
            <div class="els" style="width: 96%; margin: 0px auto">
              <div class="title_m_b">
                <div class="box"></div>
                &nbsp; 订单数据
              </div>
              <span style="font-size: 14px; color: #9e9e9e" @click="goWaitPay(0)">查看详情</span>
            </div>
            <div class="els" style="width: 96%; margin: 15px auto">
              <div class="data" @click="goWaitPay(0)">
                <p>{{ waitPay }}</p>
                <p class="text1">待付款订单</p>
              </div>
              <div class="data" @click="goWaitPay(1)">
                <p>{{ waitDeliver }}</p>
                <p class="text1">待发货订单</p>
              </div>
              <div class="data" style="border: 0" @click="goWaitPay(2)">
                <p>{{ waitReceive }}</p>
                <p class="text1">待收货</p>
              </div>
              <div class="data" @click="goWaitPay(5)">
                <p>{{ waitEvaluate }}</p>
                <p class="text1">待评价</p>
              </div>
              <div class="data" @click="goWaitAfterSale()" style="border: 0">
                <p>{{ shopMes.waitAfterCount }}</p>
                <p class="text1">售后中</p>
              </div>
            </div>
          </div>
          <div class="els order other">
            <div class="els" style="width: 96%; margin: 15px auto">
              <div class="other_fun els" @click="goOrder">
                <img src="@/assets/images/Frame86.png" class="mes_photo" />
                <p style="width: 100%; text-align: center">订单查询</p>
              </div>
              <div class="other_fun els" @click="goGoods">
                <img src="@/assets/images/Frame87.png" class="mes_photo" />
                <p style="width: 100%; text-align: center">商品管理</p>
              </div>
              <div class="other_fun els" @click="goGoods1">
                <img src="@/assets/images/Frame88.png" class="mes_photo" />
                <p style="width: 100%; text-align: center">发布商品</p>
              </div>
              <div class="other_fun els" @click="goAfterSale">
                <img src="@/assets/images/Frame89.png" class="mes_photo" />
                <p style="width: 100%; text-align: center">售后管理</p>
              </div>
              <div class="other_fun els" @click="goUserList">
                <img src="@/assets/images/Frame90.png" class="mes_photo" />
                <p style="width: 100%; text-align: center">用户管理</p>
              </div>
            </div>
          </div>
        </div>
        <div class="inform" @click="moreNews">
          <div class="els" style="width: 96%; margin: 0px auto">
            <div class="title_m_b">
              <div class="box"></div>
              &nbsp; 通知公告
            </div>
            <span style="font-size: 14px; color: #9e9e9e; cursor: pointer">更多</span>
          </div>

          <div class="els nav_li" v-for="(item, index) in message.splice(0, 5)" :key="index">
            <span class="mess_title">{{ item.topic }}</span>
            <span style="color: #9e9e9e; width: 80px">{{ item.sendAt.substring(0, 10) }}</span>
          </div>
        </div>
      </div>
      <div class="publish authentication" v-show="authentication">
        <div class="publish1">
          <el-form ref="ruleFormRef" :model="uploadMes" label-width="0px" label-position="right" :rules="rules">
            <div class="good_mes"></div>
            <div class="title1" style="position: fixed; width: 70%; z-index: 99">
              <div class="title_mes">
                <el-icon size="20" color="#fff"><Edit /></el-icon>&nbsp;支付认证
              </div>
              <div class="close" @click="maskBtn1">✖</div>
            </div>
            <div style="height: 80px"></div>
            <div class="content1">
              <el-table
                id="out-table"
                :data="tableData"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align': 'center'}"
                border
                :show-overflow-tooltip="true">
                <el-table-column prop="sn" label="编号" align="center" />
                <el-table-column prop="creatAt" label="审核时间" align="center" />
                <el-table-column prop="status" label="审核状态" align="center"> </el-table-column>
                <el-table-column prop="note" label="说明" align="center" />
              </el-table>
              <!-- /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*  公司信息  /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/* -->
              <p class="mes">基础信息</p>
              <div style="display: flex; align-items: center">
                <div style="width: 120px; display: flex; justify-content: center; flex-wrap: wrap">
                  <span class="text_mes" style="width: 100%; text-align: center">营业执照</span>
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                    v-model:file-list="LicenceFile"
                    :on-change="LicenceUP"
                    :limit="1">
                    <el-icon class="up_img"><Picture /></el-icon>
                    <template #file="{file}">
                      <div>
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                        <span class="el-upload-list__item-actions" style="">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                            style="position: absolute; left: 30px; top: 48%">
                            <el-icon><zoom-in /></el-icon>
                          </span>
                          <div style="width: 40px; height: 40px"></div>
                          <span class="el-upload-list__item-delete" style="position: absolute; right: 40px; top: 48%">
                            <el-icon @click="DelLicence"><Delete /></el-icon>
                          </span>
                        </span>
                      </div>
                    </template>
                  </el-upload>
                  <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%; height: 100%" />
                  </el-dialog>
                </div>
                &emsp;&emsp;

                <div style="width: 120px; display: flex; justify-content: center; flex-wrap: wrap">
                  <span class="text_mes" style="width: 100%; text-align: center">开户许可证</span>
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                    v-model:file-list="openAccountLicence"
                    :on-change="openAccountLicenceChange"
                    :limit="1">
                    <el-icon class="up_img"><Picture /></el-icon>
                    <template #file="{file}">
                      <div>
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                        <span class="el-upload-list__item-actions" style="">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                            style="position: absolute; left: 30px; top: 48%">
                            <el-icon><zoom-in /></el-icon>
                          </span>
                          <div style="width: 40px; height: 40px"></div>
                          <span class="el-upload-list__item-delete" style="position: absolute; right: 40px; top: 48%">
                            <el-icon @click="DelopenAccountLicenceChange"><Delete /></el-icon>
                          </span>
                        </span>
                      </div>
                    </template>
                  </el-upload>
                  <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%; height: 100%" />
                  </el-dialog>
                </div>
              </div>
              <div class="fx">
                <div style="width: 45%">
                  <el-form-item prop="signName" style="width: 100%">
                    <p class="mes_title">公司名(企业签约名)</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入公司名" v-model="uploadMes.signName"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="licenceNo" style="width: 100%">
                    <p class="mes_title">证件号码</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入证件号码" v-model="uploadMes.licenceNo"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="shortName" style="width: 100%">
                    <p class="mes_title">店铺名</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="店铺名" v-model="uploadMes.shortName"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="bankAccountType " style="width: 100%">
                    <p class="mes_title">账户类型</p>
                    <div class="range" style="width: 100%">
                      <el-select
                        v-model="uploadMes.bankAccountType"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请选择账户类型"
                        remote-show-suffix
                        :remote-method="remoteMethod"
                        :loading="loading"
                        style="width: 100%">
                        <el-option
                          v-for="item in card_type_options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="bankCode" style="width: 100%">
                    <p class="mes_title">开户行总行</p>
                    <div class="range" style="width: 100%">
                      <div class="m-4">
                        <el-select
                          v-model="uploadMes.bankCode"
                          filterable
                          remote
                          reserve-keyword
                          placeholder="请选择开户行"
                          remote-show-suffix
                          :remote-method="remoteMethod"
                          :loading="loading"
                          style="width: 100%">
                          <el-option v-for="item in brankBox" :key="item.code" :label="item.name" :value="item.code" />
                        </el-select>
                      </div>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="bankCardNo" style="width: 100%">
                    <p class="mes_title">银行卡号</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入银行卡号" v-model="uploadMes.bankCardNo"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="bankCardNo" style="width: 100%">
                    <p class="mes_title">结算方向</p>
                    <div class="range" style="width: 100%">
                      <el-select
                        v-model="uploadMes.settlementDirection"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请选择结算方向"
                        remote-show-suffix
                        :remote-method="remoteMethod"
                        :loading="loading"
                        style="width: 100%">
                        <el-option
                          v-for="item in direction_options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="signType" style="width: 100%">
                    <p class="mes_title">签约类型</p>
                    <div class="range" style="width: 100%">
                      <el-select
                        v-model="uploadMes.signType"
                        class="m-2"
                        placeholder="请选择签约类型"
                        style="width: 100%">
                        <el-option
                          v-for="item in type_options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="businessAddressInfo" style="width: 100%">
                    <p class="mes_title">经营地址</p>
                    <div class="range" style="width: 100%">
                      <el-cascader
                        v-model="uploadMes.businessAddressInfo"
                        :options="addressBox"
                        @change="addressChange"
                        style="width: 100%" />
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 70%">
                  <el-form-item prop="address" style="width: 100%">
                    <p class="mes_title">请输入详细地址</p>
                    <div class="range" style="width: 100%">
                      <el-input
                        placeholder="请输入详细地址"
                        v-model="uploadMes.address"
                        type="textarea"
                        row="8"
                        maxlength="50"
                        show-word-limit></el-input>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <!-- /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*  法人信息  /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/* -->
              <p class="mes">法人信息</p>
              <span class="text_mes">证件照</span>
              <div style="display: flex; align-items: center">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                  v-model:file-list="idCard"
                  :on-change="idCardFile"
                  :limit="1">
                  <el-icon class="up_img"><Picture /></el-icon>
                  <template #file="{file}">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions" style="">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                          style="position: absolute; left: 30px; top: 48%">
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <div style="width: 40px; height: 40px"></div>
                        <span class="el-upload-list__item-delete" style="position: absolute; right: 40px; top: 48%">
                          <el-icon @click="DelidCard"><Delete /></el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                  <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%; height: 100%" />
                </el-dialog>
                &emsp;&emsp;
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                  v-model:file-list="idCard1"
                  :on-change="idCard1File"
                  :limit="1">
                  <el-icon class="up_img"><Picture /></el-icon>
                  <template #file="{file}">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions" style="">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                          style="position: absolute; left: 30px; top: 48%">
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <div style="width: 40px; height: 40px"></div>
                        <span class="el-upload-list__item-delete" style="position: absolute; right: 40px; top: 48%">
                          <el-icon @click="DelidCard1"><Delete /></el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                  <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%; height: 100%" />
                </el-dialog>
              </div>
              <div class="fx">
                <div style="width: 45%">
                  <el-form-item prop="legalName" style="width: 100%">
                    <p class="mes_title">法人姓名</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入法人姓名" v-model="uploadMes.legalName"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="legalLicenceNo" style="width: 100%">
                    <p class="mes_title">证件号码</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入证件号码" v-model="uploadMes.legalLicenceNo"></el-input>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <!-- /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*  联系人信息  /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/* -->
              <p class="mes">联系人信息</p>
              <div class="fx">
                <div style="width: 45%">
                  <el-form-item prop="contactName" style="width: 100%">
                    <p class="mes_title">联系人姓名</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入联系人姓名" v-model="uploadMes.contactName"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="contactMobile" style="width: 100%">
                    <p class="mes_title">联系人手机号</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入联系人手机号" v-model="uploadMes.contactMobile"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="contactEmail" style="width: 100%">
                    <p class="mes_title">联系人邮箱</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入联系人邮箱" v-model="uploadMes.contactEmail"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="contactLicenceNo" style="width: 100%">
                    <p class="mes_title">联系人证件号码</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入联系人证件号码" v-model="uploadMes.contactLicenceNo"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="adminEmail" style="width: 100%">
                    <p class="mes_title">后台管理员邮箱</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入管理员邮箱" v-model="uploadMes.adminEmail"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="adminMobile" style="width: 100%">
                    <p class="mes_title">后台管理员手机号</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入管理员手机号" v-model="uploadMes.adminMobile"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div style="width: 45%">
                  <el-form-item prop="servicePhone" style="width: 100%">
                    <p class="mes_title">客服电话</p>
                    <div class="range" style="width: 100%">
                      <el-input placeholder="请输入客服电话" v-model="uploadMes.servicePhone"></el-input>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="btn_center">
              <el-button class="hollow" @click="maskBtn1">取消</el-button>
              <el-button class="solid" @click="uploadSure(ruleFormRef)">确定</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
  <div id="mask1" v-if="authentication" @click="maskBtn1"></div>
</template>

<script setup lang="ts">
import {Top, Bottom} from '@element-plus/icons-vue';
import {ref, onMounted, reactive} from 'vue';
import {
  RequestShopDataMes,
  RequestShopGetMes,
  Licence,
  RequestPayAccountUploadQual,
  idCardRecognition,
  RequestRegisterMerchant,
  RequestBankCode,
} from '@/api/path/index.js';
import salesInfo from '@/components/shop/salesInfo.vue';
import salesInfo1 from '@/components/shop/salesInfo1.vue';
import attention from '@/components/shop/attention.vue';
import attention1 from '@/components/shop/attention1.vue';
import monthlyViewCount from '@/components/shop/monthlyViewCount.vue';
import monthlyViewCount1 from '@/components/shop/monthlyViewCount1.vue';
import {useRouter} from 'vue-router';
import {Edit, Picture, Delete, ZoomIn} from '@element-plus/icons-vue';
import type {FormInstance} from 'element-plus';
import {regionData, codeToText} from 'element-china-area-data';
// import { provinceAndCityData, CodeToText } from 'element-china-area-data'
const ruleFormRef = ref<FormInstance>();
const tableData = ref([
  {
    sn: 1,
    creatAt: '2023-10-19 14:12:36',
    status: 0,
    note: '说明',
  },
]);
const router = useRouter();
const activeName = ref('销售额'); //当前显示的导航栏
const nav_list = ref([
  {
    class: ['navlist', 'nav_li'],
    text: '销售额',
    status: '0',
  },
  {
    class: ['nav_li'],
    text: '浏览量',
    status: '1',
  },
  {
    class: ['nav_li'],
    text: '关注用户',
    status: '2',
  },
]);
const show = ref('销售额');
const navChange = (item: any) => {
  for (let i = 0; i < nav_list.value.length; i++) {
    const filteredClasses = nav_list.value[i].class.filter((className) => className !== 'navlist');
    nav_list.value[i].class = filteredClasses;
    show.value = item.text;
  }
  item.class.push('navlist');
  console.log(show.value);
  console.log(timeChange.value);
};
const timeChange = ref('年'); //搜索时间
const timeChangeEve = () => {
  console.log(timeChange.value);
  console.log(activeName.value);
};
/**
 * echarts
 */
// const linechartBox = ref(null)
const shopId = localStorage.getItem('ShopId');
const shopMes = ref<any>({
  followCountInfo: {
    growthRate: '',
    currentFollowCount: '',
  },
  orderCountInfo: {
    currentOrderCount: '',
    growthRate: '',
  },
  salesInfo: {
    currentMonthCount: '',
    growthRate: '',
  },
  shop: {},
  viewCountInfo: {},
}); //首页数据
const waitReceive = ref(); //待收货
const waitEvaluate = ref(); //待评价
const waitDeliver = ref(); //待发货
const waitPay = ref(); //待支付
const message = ref([]);
const brankBox = ref([]); //银行卡
const addressBox = ref<any>([]); //地址
onMounted(async () => {
  getWindowResize();
  window.addEventListener('resize', getWindowResize);
  const a = await RequestShopDataMes();
  shopMes.value = a.resultObj;
  waitDeliver.value = a.resultObj.orderStatusCount[1];
  waitReceive.value = a.resultObj.orderStatusCount[2];
  waitEvaluate.value = a.resultObj.orderStatusCount[5];
  waitPay.value = a.resultObj.orderStatusCount[0];
  const b = await RequestShopGetMes({
    shopId: localStorage.getItem('ShopId'),
    page: 1,
    rows: 15,
  });
  message.value = b.resultObj.shopMessages;
  // 获取银行卡
  const brankList = await RequestBankCode({keyword: ''});
  brankBox.value = brankList.resultObj.codes;
  console.log('银行列表获取成功', brankList);
  // // 获取地址
  addressBox.value = regionData;
});
const echartsWidth = ref('');
const echartsHeight = ref('');
const widthWight = (width: string, height: string) => {
  echartsWidth.value = width;
  echartsHeight.value = height;
  console.log('图表宽度图表宽度图表宽度图表宽度图表宽度图表宽度图表宽度图表宽度图表宽度图表宽度', echartsWidth.value);
  console.log(
    '图表高度图表高度图表高度图表高度图表高度图表高度图表高度图表高度图表高度图表高度图表高度图表高度',
    echartsHeight.value,
  );
  getWindowResize();
  window.addEventListener('resize', getWindowResize);
};
// 屏幕宽度
const windowWidth = ref(0);
// 屏幕高度
const windowHeight = ref(0);
const width = ref<any>();
// 获取屏幕尺寸
const getWindowResize = function () {
  windowWidth.value = window.innerWidth;
  windowHeight.value = window.innerHeight;
  if (windowWidth.value >= 1200) {
    width.value = '100%';
  } else {
    width.value = '1200px';
  }
};
/**
 * 去订单界面
 */
const goWaitPay = (value: number) => {
  console.log('去订单界面', value);
  router.push('/store/orderManage?node=' + value);
};

/**
 * 点击店铺修改
 */
const shopAmend = () => {
  router.push('/store/openstoreManage');
};
/**
 * 查看更多通知
 */
const moreNews = () => {
  router.push('/Shop/Information/messageNotification');
};
/**
 * 点击查看售后中
 */
const goWaitAfterSale = () => {
  router.push('/store/orderManage/orderAftersale?status=2');
};
/**
 * 点击开通
 */
const authentication = ref(false); //控制
const authorize = () => {
  authentication.value = true;
};
const LicenceFile = ref([]); //营业执照
const idCard = ref([]); //法人证件照
const idCard1 = ref([]); //法人证件照
const openAccountLicence = ref([]); //开户许可证
/**
 * 支付入网数据
 */
const uploadMes = ref({
  licenceUrl: '', //营业执照地址
  signName: '', //商户签约名
  licenceNo: '', //统一社会信用编码
  shortName: '', //店铺名
  signType: '', //签约类型
  openAccountLicenceUrl: '', //开户许可证

  legalName: '', //法人名称
  legalLicenceNo: '', //法人证件编号
  legalLicenceFrontUrl: '', //法人证件人像面照片地址
  legalLicenceBackUrl: '', //法人证件非人像面照片地址

  contactName: '', //联系人姓名
  contactMobile: '', //联系人手机号
  contactEmail: '', //联系人邮箱
  contactLicenceNo: '', //联系人证件号码
  servicePhone: '', //客服电话
  adminEmail: '', //商户后台管理员邮箱
  adminMobile: '', //商户后台管理员手机号

  bankCode: '', //开户行
  bankCardNo: '', //银行卡号
  bankAccountType: '', //账户类型
  settlementDirection: '', //结算方向

  businessAddressInfo: '', //经营地址
  province: '', //省
  city: '', //市
  district: '', //区
  address: '',
});
/**
 * 上传营业执照
 */
const LicenceUP = async (file: any) => {
  const LicenceFom = new FormData();
  LicenceFom.append('file', file.raw);
  const mylist = LicenceFom.get('file');
  console.log('营业执照上传成功1111111,', mylist);
  const LicenceGet = await RequestPayAccountUploadQual(LicenceFom);
  uploadMes.value.licenceUrl = LicenceGet.resultObj;
  console.log('营业执照上传成功');

  const formimgs = new FormData();
  formimgs.append('Licence', file.raw);
  const a = await Licence(formimgs);
  console.log('营业至少识别成功', a);
  if (a.msg == '操作成功！') {
    uploadMes.value.signName = JSON.parse(a.resultObj).words_result.单位名称.words;
    uploadMes.value.licenceNo = JSON.parse(a.resultObj).words_result.社会信用代码.words;
  } else {
    ElMessage.error('识别失败，请重新上传营业执照！');
  }
};
/**
 * 删除营业执照
 */
const DelLicence = () => {
  LicenceFile.value = [];
  uploadMes.value.licenceUrl = '';
};

/**
 * 开户许可证
 */
const openAccountLicenceChange = async (file: any) => {
  const openAccountLicence = new FormData();
  openAccountLicence.append('file', file.raw);
  const openAccountLicenceGet = await RequestPayAccountUploadQual(openAccountLicence);
  uploadMes.value.openAccountLicenceUrl = openAccountLicenceGet.resultObj;
  console.log('营业执照上传成功');
};
/**
 * 删除营业执照
 */
const DelopenAccountLicenceChange = () => {
  openAccountLicence.value = [];
  uploadMes.value.openAccountLicenceUrl = '';
};
/**
 * 上传身份证正面
 */
const idCardFile = async (file: any) => {
  // 正面身份证地址
  const idCardFom = new FormData();
  idCardFom.append('file', file.raw);
  const mylist = idCardFom.get('file');
  console.log('营业执照上传成功1111111,', mylist);
  console.log('身份证上传成功11111111111,', file.raw);
  const idCardGet = await RequestPayAccountUploadQual(idCardFom);
  uploadMes.value.legalLicenceFrontUrl = idCardGet.resultObj;
  console.log('身份证上传成功');

  const formimgs = new FormData();
  formimgs.append('idCard', file.raw);
  const a = await idCardRecognition(formimgs);
  console.log('身份证识别', JSON.parse(a.resultObj));

  if (a.msg == '操作成功！') {
    uploadMes.value.legalName = JSON.parse(a.resultObj).words_result.姓名.words;
    uploadMes.value.legalLicenceNo = JSON.parse(a.resultObj).words_result.公民身份号码.words;
    console.log('身份证识别11111', uploadMes.value);
  }
  console.log('身份证识别99999', uploadMes.value);
};
const idCard1File = async (file: any) => {
  // 背面身份证地址
  const idCard1Fom = new FormData();
  idCard1Fom.append('file', file.raw);
  const mylist = idCard1Fom.get('file');
  console.log('营业执照上传成功1111111,', mylist);
  console.log('身份证上传成功66666,', file.raw);
  const idCard1Get = await RequestPayAccountUploadQual(idCard1Fom);
  uploadMes.value.legalLicenceBackUrl = idCard1Get.resultObj;
  console.log('身份证上传成功5555');
};

/**
 * 删除身份证
 */
const DelidCard = () => {
  idCard.value = [];
  uploadMes.value.legalLicenceFrontUrl = '';
};
const DelidCard1 = () => {
  idCard1.value = [];
  uploadMes.value.legalLicenceBackUrl = '';
};
/**
 * 预览上传的图片
 */
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
// 银行卡条件查询
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
// 地址选择
const addressChange = (e) => {
  uploadMes.value.province = e[0];
  uploadMes.value.city = e[1];
  uploadMes.value.district = e[2];
  console.log('地址改变了', codeToText);
  for (let k in codeToText) {
    if (codeToText[k] == uploadMes.value.province) {
      const x = 6 - k.length;
      for (let i = 0; i < x; i++) {
        console.log(i);

        k = k + '0';
      }
      uploadMes.value.province = k;
    } else if (codeToText[k] == uploadMes.value.city) {
      const y = 6 - k.length;
      for (let i = 0; i < y; i++) {
        k = k + '0';
      }
      uploadMes.value.city = k;
    } else if (codeToText[k] == uploadMes.value.district) {
      const z = 6 - k.length;
      for (let i = 0; i < z; i++) {
        k = k + '0';
      }
      uploadMes.value.district = k;
    }
  }
  console.log('地址改变了9999999999999999999', uploadMes.value.province);
  console.log('地址改变了9999999999999999999', uploadMes.value.city);
  console.log('地址改变了9999999999999999999', uploadMes.value.district);
};

/**
 * 银行卡输入改变
 */
let timer1 = ref(null);
const remoteMethod = async (query: string) => {
  if (timer1 != null) {
    clearTimeout(timer1);
  }
  timer1 = setTimeout(async () => {
    console.log('搜索改变了', query);
    const brankList = await RequestBankCode({keyword: query});
    brankBox.value = brankList.resultObj.codes;
  }, 500);
};

/**
 * 签约类型
 */
const type_options = [
  {
    value: 'INDIVIDUAL',
    label: '个体工商户',
  },
  {
    value: 'ENTERPRISE',
    label: '企业',
  },
  {
    value: 'INSTITUTION',
    label: '事业单位',
  },
  {
    value: 'COMMUNITY',
    label: '社会团体',
  },
];
/**
 * 银行卡类型
 */
const card_type_options = [
  {
    value: 'UNIT_SETTLEMENT_CARD',
    label: '单位结算卡',
  },
  {
    value: 'ENTERPRISE_ACCOUNT',
    label: '对公账户',
  },
  {
    value: 'DEBIT_CARD',
    label: '借记卡',
  },
  {
    value: 'PASSBOOK',
    label: '存折',
  },
];
/**
 * 结算方向
 */
const direction_options = [
  {
    value: 'ACCOUNT',
    label: '结算到支付账户',
  },
  {
    value: 'BANKCARD',
    label: '结算到银行账户',
  },
];

// 表单规则
const rules = reactive({
  signName: [{required: true, message: '请输入公司名字', trigger: 'blur'}],
  // unit: [{ required: true, message: '请选择商品单位', trigger: 'change' }],
  licenceNo: [
    {required: true, message: '请输入社会信用编码', trigger: 'change'},
    {
      pattern: /^[A-Za-z0-9]+$/,
      message: '请输入正确的社会信用编码（只能由字母，数字组成）',
      trigger: 'blur',
    },
  ],
  shortName: [{required: true, message: '请输入店铺名', trigger: 'blur'}],

  signType: [{required: true, message: '请选择签约类型', trigger: 'change'}],
  bankAccountType: [{required: true, message: '请选择账户类型', trigger: 'change'}],
  bankCode: [{required: true, message: '请选择开户行', trigger: 'change'}],
  bankCardNo: [{required: true, message: '请输入银行卡号', trigger: 'blur'}],

  legalName: [{required: true, message: '请输入法人姓名', trigger: 'blur'}],
  legalLicenceNo: [
    {required: true, message: '请输入法人身份证', trigger: 'blur'},
    {
      pattern: /^[A-Za-z0-9]+$/,
      message: '请输入身份证',
      trigger: 'blur',
    },
  ],

  contactName: [{required: true, message: '请输入联系人姓名', trigger: 'blur'}],
  contactMobile: [
    {required: true, message: '请输入联系人电话', trigger: 'blur'},
    {
      pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
      message: '请输入正确手机号',
      trigger: 'blur',
    },
  ],
  contactEmail: [
    {required: true, message: '请输入联系人邮箱', trigger: 'blur'},
    {
      pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
      message: '请输入正确邮箱',
      trigger: 'blur',
    },
  ],
  contactLicenceNo: [
    {required: true, message: '请输入联系人证件号', trigger: 'blur'},
    {
      pattern: /^[A-Za-z0-9]+$/,
      message: '请输入正确证件号',
      trigger: 'blur',
    },
  ],
  servicePhone: [
    {required: true, message: '请输入客服电话', trigger: 'blur'},
    {
      pattern: /^\d+$/,
      message: '电话只能由数字组成！',
      trigger: 'blur',
    },
  ],
  adminEmail: [
    {required: true, message: '管理员邮箱', trigger: 'blur'},
    {
      pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
      message: '请输入正确邮箱',
      trigger: 'blur',
    },
  ],
  adminMobile: [
    {required: true, message: '请输入管理员手机号', trigger: 'blur'},
    {
      pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
      message: '请输入正确手机号',
      trigger: 'blur',
    },
  ],

  businessAddressInfo: [{required: true, message: '请选择地区', trigger: 'change'}],
  address: [{required: true, message: '请输入详细地址', trigger: 'blur'}],
});
let timer = ref(null); //设置记录时间，用于防抖
const loading = ref(false); //控制遮挡层次显示
const uploadSure = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      if (timer != null) {
        clearTimeout(timer);
      }
      timer = setTimeout(async () => {
        console.log('111111111111111111111111111111111111111111111999999999999999999999999999999999999');

        if (LicenceFile.value.length == 0) {
          ElMessage.error('请上传营业执照！');
        } else {
          if (openAccountLicence.value.length == 0) {
            ElMessage.error('请上传营业执照！');
          } else {
            if (idCard.value.length == 0 || idCard1.value.length == 0) {
              ElMessage.error('请上传身份证！');
            } else {
              // 营业执照地址
              loading.value = true;
              const a = await RequestRegisterMerchant({
                shopId: shopId,
                registerInfo: {
                  merchantSubjectInfo: {
                    licenceUrl: uploadMes.value.licenceUrl, //营业执照地址
                    signName: uploadMes.value.signName, //商户签约名
                    licenceNo: uploadMes.value.licenceNo, //统一社会信用编码
                    shortName: uploadMes.value.shortName, //店铺名
                    signType: uploadMes.value.signType, //店铺名
                    openAccountLicenceUrl: uploadMes.value.openAccountLicenceUrl, //开户许可证照片地址
                  },
                  merchantCorporationInfo: {
                    legalName: uploadMes.value.legalName, //法人名称
                    legalLicenceNo: uploadMes.value.legalLicenceNo, //法人证件编号
                    legalLicenceFrontUrl: uploadMes.value.legalLicenceFrontUrl, //法人证件人像面照片地址
                    legalLicenceBackUrl: uploadMes.value.legalLicenceBackUrl, //法人证件非人像面照片地址
                  },
                  merchantContactInfo: {
                    contactName: uploadMes.value.contactName, //联系人姓名
                    contactMobile: uploadMes.value.contactMobile, //联系人手机号
                    contactEmail: uploadMes.value.contactEmail, //联系人邮箱
                    contactLicenceNo: uploadMes.value.contactLicenceNo, //联系人证件号码
                    servicePhone: uploadMes.value.servicePhone, //客服电话
                    adminEmail: uploadMes.value.adminEmail, //商户后台管理员邮箱
                    adminMobile: uploadMes.value.adminMobile, //商户后台管理员手机号
                  },
                  settlementAccountInfo: {
                    bankCode: uploadMes.value.bankCode, //开户行
                    bankCardNo: uploadMes.value.bankCardNo, //银行卡号
                    bankAccountType: uploadMes.value.bankAccountType, //账户类型
                    settlementDirection: uploadMes.value.settlementDirection, //结算方向
                  },
                  businessAddressInfo: {
                    province: uploadMes.value.province, //经营地址
                    city: uploadMes.value.city, //经营地址
                    district: uploadMes.value.district, //经营地址
                    address: uploadMes.value.address, //经营地址
                  },
                },
              });
              if (a.msg == '操作成功！') {
                loading.value = false;
                if (a.resultObj.result.returnCode == 'NIG00000') {
                  ElMessage.success(a.resultObj.result.returnMsg);
                  // 提交成功，清除信息
                  setTimeout(() => {
                    authentication.value = false;
                    uploadMes.value = {
                      licenceUrl: '', //营业执照地址
                      signName: '', //商户签约名
                      licenceNo: '', //统一社会信用编码
                      shortName: '', //店铺名
                      businessAddressInfo: '', //经营地址
                      signType: '', //经营地址
                      openAccountLicenceUrl: '', //经营地址

                      legalName: '', //法人名称
                      legalLicenceNo: '', //法人证件编号
                      legalLicenceFrontUrl: '', //法人证件人像面照片地址
                      legalLicenceBackUrl: '', //法人证件非人像面照片地址

                      contactName: '', //联系人姓名
                      contactMobile: '', //联系人手机号
                      contactEmail: '', //联系人邮箱
                      contactLicenceNo: '', //联系人证件号码
                      servicePhone: '', //客服电话
                      adminEmail: '', //商户后台管理员邮箱
                      adminMobile: '', //商户后台管理员手机号

                      bankCode: '', //开户行
                      bankCardNo: '', //银行卡号
                      bankAccountType: '', //银行卡号
                      settlementDirection: '', //银行卡号

                      province: '', //省
                      city: '', //市
                      district: '', //区
                      address: '', //区
                    };
                    LicenceFile.value = [];
                    idCard.value = [];
                    idCard1.value = [];
                  }, 1000);
                } else {
                  ElMessage.error(a.resultObj.result.returnMsg);
                }
              } else {
                loading.value = false;
                ElMessage.error('提交失败，请重试！');
              }
            }
          }
        }
      }, 500);
    }
  });
};
/**
 * 订单查询
 */
const goOrder = () => {
  router.push('/store/orderManage');
};
/**
 * 商品管理
 */
const goGoods = () => {
  router.push('/shop/manage/goodsList');
};
/**
 * 商品管理
 */
const goGoods1 = () => {
  router.push('/shop/manage/goodsList?push');
};
/**
 * 售后管理
 */
const goAfterSale = () => {
  router.push('/store/orderManage/orderAftersale');
};
/**
 * 用户管理
 */
const goUserList = () => {
  router.push('/shop/InterestList');
};
const maskBtn1 = () => {
  authentication.value = false;
};
</script>

<style scoped lang="scss">
/* 隐藏滚动条 */
.authentication::-webkit-scrollbar {
  display: none;
}
.authentication {
  width: 60vw;
  margin-left: -30vw;
  overflow: scroll;
  .publish1 {
    min-width: 400px;

    .mes {
      font-size: 16px;
      line-height: 40px;
      color: #1d2129;
      background: #f5f7fa;
      padding-left: 10px;
      margin-top: 30px;
      margin-bottom: 15px;
    }
    .up_img {
      color: #9fceff;
    }
    .content1 {
      .fx {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        flex-wrap: wrap;
      }
      .mes_title {
        font-size: 14px;
        color: #333333;
      }
      .text_mes {
        font-size: 14px;
        color: #333333;
        margin: 5px 0;
        display: inline-block;
      }
    }
  }
  .title1 {
    width: 60vw !important;
  }
}

/* 隐藏滚动条 */
.mains::-webkit-scrollbar {
  display: none;
}
.mains {
  width: v-bind(width);
  height: 870px;
  overflow: scroll;
}
.first {
  width: 100%;
  .mesbox {
    width: 23.5%;
    height: 150px;
    background: #fff;
    padding: 10px;
    flex-wrap: wrap;
    border-radius: 5px;
    .mes_title {
      height: 80px;
      width: 100%;
      .mes_photo {
        width: 70px;
        height: 70px;
        margin: 5px;
      }
      .left {
        .mes_text {
          font-size: 14px;
          color: #9e9e9e;
        }
        .mes_num {
          font-size: 20px;
          font-weight: bold;
          margin-top: 5px;
        }
      }
    }
    .mesbottom {
      width: 100%;
      height: 50px;
      border-top: 1px solid #ebebeb;
      display: flex;
      align-items: center;
      font-size: 14px;
    }
  }
}
.secound {
  width: 100%;
  margin-top: 20px;
  height: calc(100% - 550px);
  .linechart {
    width: 74.5%;
    padding: 10px;
    height: 100%;
    background: #fff;
    position: relative;
    border-radius: 5px;

    .nav_ul {
      width: 80%;
      height: 40px;
      display: flex;
      align-items: center;
      background: #fff;
      position: relative;
      font-size: 15px;
      overflow-x: auto; /* 设置x轴可滑动 */
      white-space: nowrap; /* 元素不换行 */
      width: auto; /* (宽度) */
      border-bottom: 1px solid #e6e6e6;
      cursor: pointer;
      .nav_li {
        width: 60px;
        height: 40px;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
      }
      .navlist {
        color: #2ebce4;
        border-bottom: 3px solid #2ebce4;
      }
    }
  }

  .shop_mes {
    border-radius: 5px;
    width: 23.5%;
    height: 100%;
    padding: 10px 10px;
    background: #fff;
    .shop_title {
      height: 70px;
      padding: 10px 0;
      .head_img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: yellow;
      }
      .center {
        width: calc(100% - 100px);
        font-size: 15px;
        .shop_rate {
          display: inline-block;
          padding: 3px 10px;
          background: rgb(237, 246, 255);
          font-size: 12px;
          color: #76b5f9;
          margin-top: 5px;
          border-radius: 10px;
        }
      }
    }
    .brief {
      width: 100%;
      padding: 15px 10px;
      color: #9e9e9e;
      font-size: 12px;
      background: #f5f7fa;
      margin-top: 10px;
      border-radius: 10px;
      height: 60px;
      .text {
        /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
        display: -webkit-box;
        /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
        -webkit-box-orient: vertical;
        /*要显示的行数*/
        -webkit-line-clamp: 2;
        /* 溢出部分隐藏 */
        overflow: hidden;
      }
    }
    .nav_box {
      height: calc(100% - 150px);
      flex-wrap: wrap;
      align-content: space-around;
      .first_text {
        padding: 5px 10px;
        background: #1890ff;
        color: #fff;
        font-size: 12px;
        border-radius: 12px;
      }
      .navlist {
        width: 100%;
        font-size: 14px;
        line-height: 14px;
        color: #3d3d3d;
      }
    }
  }
}

.third {
  width: 100%;
  margin-top: 20px;
  .left {
    width: 74.5%;
    height: 300px;
    .order {
      width: 100%;
      height: 140px;
      background: #fff;
      border-radius: 5px;
      overflow: hidden;
      padding: 10px;
      .data {
        width: 25%;
        height: 80px;
        border-right: 1px solid #e9e9e9;
        font-size: 24px;
        font-weight: bold;
        padding-left: 20px;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        cursor: pointer;

        .text1 {
          width: 100%;
          font-size: 14px;
          font-weight: bold;
          margin-top: 10px;
        }
      }
    }
    .other {
      margin-top: 20px;
      .other_fun {
        width: 70px;
        flex-wrap: wrap;
        justify-content: center;
        cursor: pointer;

        .mes_photo {
          width: 50px;
          height: 50px;
          margin: 5px;
        }
      }
    }
  }
  .inform {
    border-radius: 5px;
    width: 23.5%;
    height: 300px;
    background: #fff;
    padding: 10px;
    cursor: pointer;
    .nav_li {
      width: 94%;
      font-size: 14px;
      margin: 20px auto;
    }
  }
}
.echarts {
  width: 100%;
  height: 250px;
}
.mess_title {
  display: block;
  width: calc(100% - 80px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title_m_b {
  display: flex;
  align-items: center;
  font-size: 16px;
  .box {
    width: 3px;
    height: 15px;
    background: #5697f9;
  }
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
::deep(.el-tabs) {
  height: 100% !important;
}
::deep(.el-tabs__content .el-tab-pane) {
  height: calc(100% - 55px) !important;
  height: 200px !important;
}
::v-deep .el-tabs,
.el-tab-pane {
  height: 100% !important;
  // background: rgb(133, 244, 250);
}
::v-deep .el-tabs__content {
  height: calc(100% - 55px) !important;
}
::v-deep .el-upload--picture-card {
  background: #ecf5ff !important;
  border: 0 !important;
}
::v-deep .el-upload-list--picture-card {
  width: 120px !important;
  height: 120px !important;
  overflow: hidden !important;
}
::v-deep .el-loading-mask {
  position: fixed;
}
::v-deep .el-dialog__header.show-close {
  height: 45px;
}
</style>
